<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    width="30%"
    destroy-on-close
  >
    <el-form
      ref="form"
      v-loading="loading"
      :model="formInfo"
      label-width="100px"
      :rules="rules"
    >
      <el-form-item label="用户名称:" prop="username">
        <el-input v-model="formInfo.username" />
      </el-form-item>
      <el-form-item v-if="title === '新增'" label="登录密码" prop="password">
        <el-input
          v-model="formInfo.password"
          type="password"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="真实姓名:" prop="realName">
        <el-input v-model="formInfo.realName" />
      </el-form-item>
      <el-form-item label="出生日期:" prop="birthday">
        <el-date-picker
          v-model="formInfo.birthday"
          type="date"
          placeholder="选择日期"
        />
      </el-form-item>
      <el-form-item label="性別:" prop="sex">
        <el-radio-group v-model="formInfo.sex">
          <el-radio
            v-for="(sexOption, index) in sexOptions"
            :key="index"
            :label="sexOption.value"
          >{{ sexOption.text }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="电子邮箱:" prop="email">
        <el-input v-model="formInfo.email" />
      </el-form-item>
      <el-form-item label="手机号码:" prop="phone">
        <el-input v-model="formInfo.phone" />
      </el-form-item>
      <el-form-item label="登录类型:" prop="loginType">
        <el-radio-group v-model="formInfo.loginType">
          <el-radio
            v-for="(loginTypeOption, index) in loginTypeOptions"
            :key="index"
            :label="loginTypeOption.value"
          >{{ loginTypeOption.text }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-show="$store.getters.role==='superAdmin'" label="角色:" prop="role">
        <el-radio-group v-model="formInfo.role">
          <el-radio
            v-for="(roleOption, index) in roleOptions"
            :key="index"
            :label="roleOption.value"
          >{{ roleOption.text }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button
        v-if="title === '新增'"
        type="primary"
        @click="submit(url.add, 'Post')"
      >新 增</el-button>
      <el-button
        v-if="title === '编辑'"
        type="primary"
        @click="submit(url.edit, 'Put')"
      >保 存</el-button>
    </span>
  </el-dialog>
</template>

<script>
import formApi from '@/api/common/formApi'

export default {
  name: 'UserModel',
  components: {},
  filters: {},
  data() {
    return {
      sexOptions: [{ value: 1, text: '男' }, { value: 2, text: '女' }],
      loginTypeOptions: [{ value: 1, text: '单用户' }, { value: 2, text: '多用户' }],
      roleOptions: [{ value: 'admin', text: '管理员' }, { value: 'superAdmin', text: '超级管理员' }, {
        value: 'user',
        text: '普通用户'
      }],
      title: '',
      visible: false,
      formInfo: {
        username: '',
        password: '',
        realName: '',
        birthday: new Date(),
        avatar:
          'http://qingqingxuan.gitee.io/vue-admin-work/static/img/img_avatar_example.5c81ce68.gif',
        sex: 0,
        email: '',
        phone: '',
        status: '1',
        isDelete: 0,
        loginType: 0,
        role: 'user'
      },
      defaultFormInfo: {
        username: '',
        password: '',
        realName: '',
        birthday: new Date(),
        avatar:
          'http://qingqingxuan.gitee.io/vue-admin-work/static/img/img_avatar_example.5c81ce68.gif',
        sex: 0,
        email: '',
        phone: '',
        status: '1',
        isDelete: 0,
        loginType: 0,
        role: 'user'
      },
      url: {
        add: '/system/sys-user/add',
        edit: '/system/sys-user/edit'
      },
      loading: false,
      rules: {
        username: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
          {
            min: 5,
            max: 100,
            message: '长度在 5 到 100 个字符',
            trigger: 'blur'
          }
        ],
        password: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
          {
            min: 6,
            max: 100,
            message: '长度在 6 到 100 个字符',
            trigger: 'blur'
          }
        ],
        realName: [
          { required: true, message: '请输入真实姓名', trigger: 'blur' },
          {
            min: 2,
            max: 100,
            message: '长度在 2 到 100 个字符',
            trigger: 'blur'
          }
        ],
        birthday: [
          {
            required: true,
            message: '请选择时间',
            trigger: 'change'
          }
        ],
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          {
            type: 'email',
            message: '请输入正确的邮箱地址',
            trigger: ['blur', 'change']
          }
        ],
        phone: [{ type: 'string', required: true, message: '手机号不能为空' }]
      }
    }
  },
  created() {
    // 备份默认值
    // this.defaultFormInfo = JSON.parse(JSON.stringify(this.formInfo));
  },
  methods: {
    // 新增
    add() {
      // 用于清空表单
      this.formInfo = Object.assign({}, this.defaultFormInfo)
    },
    // 编辑
    edit(formInfo) {
      this.formInfo = Object.assign({}, formInfo)
    },
    // 提交表单
    submit(url, method) {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true
          formApi.formRequest(url, method, this.formInfo).then(
            (res) => {
              console.log(res)
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.loading = false
              this.visible = false
              this.$parent.handleOK()
            },
            (err) => {
              console.log(err)
              this.$message.error('操作失败')
              this.loading = false
              this.visible = false
            }
          )
        } else {
          this.$message.error('请检查输入')
          return false
        }
      })
    }
  }
}
</script>
